import { computed, defineComponent, inject, PropType } from 'vue'

import Table, { IColumn } from 'components/Table'

import { formatTime } from 'utils/time'

import {
  IMusic,
  IArtist,
  IAlbum,
  MUSIC_STATUS,
  MUSIC_TYPE,
} from 'apis/types/business'
import albumApis from 'apis/album'

import styles from './style.module.scss'
import { useStore } from 'vuex'
import { createMusic } from '@/utils/business'

const props = {
  data: {
    type: Array as PropType<IMusic[]>,
    required: true,
  },
  onPlayAll: Function as PropType<(autoPlay?: boolean) => void>,
} as const

export default defineComponent({
  name: '',
  props,
  emits: ['playAll'],
  setup(props, { emit }) {
    console.log(props)
    const store = useStore()
    const tableData = props.data
    const musicId = computed(() => store.state.playMusic.musicId) // 歌曲ID
    const audioInfo: any = inject('audioInfo')
    const columns: IColumn<IMusic, keyof IMusic>[] = [
      {
        label: '',
        key: 'name',
        width: '80',
        render: (name: string, record: IMusic, index?: number) => {
          return (
            <div class={styles.operations}>
              {musicId.value === record.id ? (
                <span class={styles.isPlaying}>
                  <iconfont
                    icon={
                      audioInfo.state?.paused
                        ? 'icon-volumeyinliang'
                        : 'icon-volumeyinliangda'
                    }
                    color="#d33a31"
                  />
                </span>
              ) : (
                <span class={styles.index}>{(index || 0) + 1}</span>
              )}
              <iconfont icon="icon-xiazai"></iconfont>
            </div>
          )
        },
      },
      {
        label: '音乐标题',
        key: 'name',
        width: '480',
      },
      {
        label: '歌手',
        key: 'artists',
        width: '200',
        render: (artists: IArtist[]) =>
          artists?.map(({ name }) => name).join(' / '),
      },
      {
        label: '专辑',
        key: 'album',
        width: '266',
        render: (album: IAlbum) => album?.name,
      },
      {
        label: '时长',
        key: 'duration',
        width: '133',
        render: (duration: number) => formatTime(duration / 1000),
      },
    ]
    const onDoubleClick = async (item: IMusic) => {
      console.log('musicInfo:::', item, item.album.id)
      let { picUrl } = item
      if (!picUrl) {
        const result = await albumApis.getAlbum(item.album.id)
        picUrl = result?.album.blurPicUrl
      }
      store.commit('play', {
        musicId: item.id,
        music: createMusic({
          ...item,
          picUrl,
          duration: item.duration / 1000,
        }),
      })
      emit('playAll', true)
    }
    const sort = { prop: 'date', order: 'descending' }
    return () => {
      return (
        <>
          <Table<IMusic>
            columns={columns}
            data={tableData}
            onDoubleClick={onDoubleClick}
          />
        </>
      )
    }
  },
})
